<!-- 隐藏字段，用于JavaScript获取当前记录数据 -->
<input type="hidden" id="row" value='{$row|json_encode}' />

<style>
.tab-content {
    padding: 20px 0;
}
.nav-tabs {
    margin-bottom: 0;
}
.tab-pane {
    padding: 20px;
    border: 1px solid #ddd;
    border-top: none;
    background: #fff;
}
.panel {
    margin-bottom: 0;
}
#members-table {
    margin-top: 15px;
}
.btn-group {
    margin-bottom: 15px;
}
</style>

<!-- 选项卡导航 -->
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a href="#class-info" aria-controls="class-info" role="tab" data-toggle="tab">班级信息</a>
    </li>
    <li role="presentation">
        <a href="#class-members" aria-controls="class-members" role="tab" data-toggle="tab">班级详情</a>
    </li>
</ul>

<!-- 选项卡内容 -->
<div class="tab-content">
    <!-- 班级信息选项卡 -->
    <div role="tabpanel" class="tab-pane active" id="class-info">
        <form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

            <div class="form-group">
                <label for="c-name" class="control-label col-xs-12 col-sm-2">{:__('Class name')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-name" name="row[name]" type="text" class="form-control" value="{$row.name|htmlentities}">
                </div>
            </div>
            <div class="form-group">
                <label for="c-subject_lv_level" class="control-label col-xs-12 col-sm-2">班级所属:</label>
                <div class="col-xs-12 col-sm-8" id="div-subject_lv">
                    <select name="row[subject_lv]" id="c-subject_lv_level" class="form-control">
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="c-classes_type2" class="control-label col-xs-12 col-sm-2">班级类型:</label>
                <div class="col-xs-12 col-sm-8" id="div-classes_type">
                    <select name="row[classes_type]" id="c-classes_type2" class="form-control">
                        <option value="2" >社区班级</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="c-manager_id2" class="control-label col-xs-12 col-sm-2">{:__('Class Manager')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <div class="input-group" style="display: none;">
                        <input id="c-manager_id2" name="row[manager_id]" type="hidden" class="form-control"
                            value="{$row.manager_id|default=''}" placeholder="{:__('Manager User ID, 0 means no manager')}">
                        <div class="input-group-btn">
                            <button type="button" id="btn-choose-manager" class="btn btn-primary" title="搜索选择管理员">
                                <i class="fa fa-search"></i> 选择
                            </button>
                            <button type="button" id="btn-clear-manager" class="btn btn-default" title="清空管理员">
                                <i class="fa fa-times"></i> 清空
                            </button>
                        </div>
                    </div>
                    <div id="manager-info" class="help-block" style="margin-top: 10px;">
                        <div style="display: flex; align-items: center;">
                            <img id="manager-avatar" src="" style="width: 32px; height: 32px; border-radius: 50%; margin-right: 10px; display: none;" onerror="this.style.display='none'; document.getElementById('manager-avatar-fallback').style.display='inline';">
                            <i id="manager-avatar-fallback" class="fa fa-user-circle" style="font-size: 32px; color: #337ab7; margin-right: 10px;"></i>
                            <div style="flex: 1;">
                                <div id="manager-name" style="font-weight: bold; color: #333;"></div>
                                <div style="margin-top: 8px;">
                                    <button type="button" id="btn-choose-manager-inline" class="btn btn-xs btn-primary" title="选择管理员">
                                        <i class="fa fa-search"></i> 选择用户
                                    </button>
                                    <button type="button" id="btn-clear-manager-inline" class="btn btn-xs btn-default" title="清空管理员" style="margin-left: 5px;">
                                        <i class="fa fa-times"></i> 清空
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="c-cover" class="control-label col-xs-12 col-sm-2">{:__('Class avatar')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <div class="input-group">
                        <input id="c-cover" name="row[cover]" type="text" class="form-control"
                            value="{$row.cover|htmlentities}">
                        <div class="input-group-addon no-border no-padding">
                            <span><button type="button" id="plupload-cover" class="btn btn-danger plupload"
                                    data-input-id="c-cover" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
                                    data-multiple="false" data-preview-id="p-cover"><i class="fa fa-upload"></i>
                                    {:__('Upload')}</button></span>
                            <span><button type="button" id="fachoose-cover" class="btn btn-primary fachoose"
                                    data-input-id="c-cover" data-mimetype="image/*" data-multiple="false"><i
                                        class="fa fa-list"></i> {:__('Choose')}</button></span>
                        </div>
                        <span class="msg-box n-right" for="c-cover"></span>
                    </div>
                    <ul class="row list-inline plupload-preview" id="p-cover"></ul>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Whether to open application to join')}:</label>
                <div class="col-xs-12 col-sm-8" id="div-open_apply">
                    <input id="c-open_apply" name="row[open_apply]" type="hidden" value="{$row.open_apply|default='1'}">
                    <a href="javascript:;" data-toggle="switcher"
                        class="btn-switcher {if $row.open_apply=='1'}active{else}text-gray{/if}" data-input-id="c-open_apply"
                        data-yes="1" data-no="0">
                        <i class="fa fa-toggle-on fa-2x {if $row.open_apply!='1'}fa-flip-horizontal{/if}"></i>
                    </a>
                    <div data-favisible="switch=1" class="p-3">{:__('Yes')}</div>
                    <div data-favisible="switch=0" class="p-3">{:__('No')}</div>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Whether verification is required to join')}:</label>
                <div class="col-xs-12 col-sm-8" id="div-need_verify">
                    <input id="c-need_verify" name="row[need_verify]" type="hidden" value="{$row.need_verify|default='1'}">
                    <a href="javascript:;" data-toggle="switcher"
                        class="btn-switcher {if $row.need_verify=='1'}active{else}text-gray{/if}" data-input-id="c-need_verify"
                        data-yes="1" data-no="0">
                        <i class="fa fa-toggle-on fa-2x {if $row.need_verify!='1'}fa-flip-horizontal{/if}"></i>
                    </a>
                    <div data-favisible="switch=1" class="p-3">{:__('Required')}</div>
                    <div data-favisible="switch=0" class="p-3">{:__('Not Required')}</div>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Whether to display in class team list')}:</label>
                <div class="col-xs-12 col-sm-8" id="div-show_in_team_list">
                    <input id="c-show_in_team_list" name="row[show_in_team_list]" type="hidden"
                        value="{$row.show_in_team_list|default='1'}">
                    <a href="javascript:;" data-toggle="switcher"
                        class="btn-switcher {if $row.show_in_team_list=='1'}active{else}text-gray{/if}"
                        data-input-id="c-show_in_team_list" data-yes="1" data-no="0">
                        <i class="fa fa-toggle-on fa-2x {if $row.show_in_team_list!='1'}fa-flip-horizontal{/if}"></i>
                    </a>
                    <div data-favisible="switch=1" class="p-3">{:__('Yes')}</div>
                    <div data-favisible="switch=0" class="p-3">{:__('No')}</div>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Whether members can view details')}:</label>
                <div class="col-xs-12 col-sm-8" id="div-allow_members_view">
                    <input id="c-allow_members_view" name="row[allow_members_view]" type="hidden"
                        value="{$row.allow_members_view|default='0'}">
                    <a href="javascript:;" data-toggle="switcher"
                        class="btn-switcher {if $row.allow_members_view=='1'}active{else}text-gray{/if}"
                        data-input-id="c-allow_members_view" data-yes="1" data-no="0">
                        <i class="fa fa-toggle-on fa-2x {if $row.allow_members_view!='1'}fa-flip-horizontal{/if}"></i>
                    </a>
                    <div data-favisible="switch=1" class="p-3">{:__('Can')}</div>
                    <div data-favisible="switch=0" class="p-3">{:__('Cannot')}</div>
                </div>
            </div>

            <div class="form-group">
                <label for="c-description" class="control-label col-xs-12 col-sm-2">{:__('Class Description')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <textarea id="c-description" name="row[description]" class="form-control"
                        rows="5">{$row.description|htmlentities}</textarea>
                </div>
            </div>

            <div class="form-group layer-footer">
                <label class="control-label col-xs-12 col-sm-2"></label>
                <div class="col-xs-12 col-sm-8">
                    <button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button>
                    <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 班级详情选项卡 -->
    <div role="tabpanel" class="tab-pane" id="class-members">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">班级成员管理</h4>
            </div>
            <div class="panel-body">
                <!-- 统计信息 -->
                <div class="row" style="margin-bottom: 15px;">
                    <div class="col-sm-12">
                        <div class="alert alert-info" style="margin-bottom: 10px;">
                            <div class="row">
                                <div class="col-sm-3">
                                    <strong><i class="fa fa-users"></i> 总成员数：</strong>
                                    <span id="total-members" class="badge badge-primary">0</span>
                                </div>
                                <div class="col-sm-3">
                                    <strong><i class="fa fa-check-circle text-success"></i> 正常：</strong>
                                    <span id="normal-members" class="badge badge-success">0</span>
                                </div>
                                <div class="col-sm-3">
                                    <strong><i class="fa fa-clock-o text-warning"></i> 待审批：</strong>
                                    <span id="pending-members" class="badge badge-warning">0</span>
                                </div>
                                <div class="col-sm-3">
                                    <strong><i class="fa fa-times-circle text-danger"></i> 已拒绝：</strong>
                                    <span id="rejected-members" class="badge badge-danger">0</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary" id="btn-add-member">
                                <i class="fa fa-plus"></i> 添加成员
                            </button>
                            <button type="button" class="btn btn-danger" id="btn-remove-member">
                                <i class="fa fa-trash"></i> 删除成员
                            </button>
                            <button type="button" class="btn btn-success" id="btn-approve-member">
                                <i class="fa fa-check"></i> 审批成员
                            </button>
                        </div>
                        <div class="btn-group" style="margin-left: 10px;">
                            <button type="button" class="btn btn-default" id="btn-refresh-members" title="刷新成员列表">
                                <i class="fa fa-refresh"></i> 刷新
                            </button>
                            <button type="button" class="btn btn-info" id="btn-export-members" title="导出成员列表">
                                <i class="fa fa-download"></i> 导出
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 成员列表表格 -->
                <div class="row" style="margin-top: 15px;">
                    <div class="col-sm-12">
                        <table id="members-table" class="table table-striped table-bordered table-hover" 
                               data-toggle="table" 
                               data-url="" 
                               data-pk="id"
                               data-pagination="true" 
                               data-page-size="10"
                               data-search="true"
                               data-show-refresh="true"
                               data-show-toggle="true"
                               data-show-columns="true"
                               data-sort-name="create_time"
                               data-sort-order="desc"
                               data-mobile-responsive="true"
                               data-buttons-align="right"
                               data-toolbar-align="left">
                            <thead>
                                <tr>
                                    <th data-field="state" data-checkbox="true"></th>
                                    <th data-field="id" data-visible="false">ID</th>
                                    <th data-field="student_id" data-sortable="true">学员ID</th>
                                    <th data-field="username" data-sortable="true">用户名</th>
                                    <th data-field="nickname" data-sortable="true">昵称</th>
                                    <th data-field="mobile" data-sortable="true">手机号</th>
                                    <th data-field="status" data-sortable="true" data-formatter="statusFormatter">状态</th>
                                    <th data-field="create_time" data-sortable="true" data-formatter="datetimeFormatter">加入时间</th>
                                    <th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents">操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>